<template>
  <div>
    <van-checkbox v-model="checked" @click="show">
      <!-- 自定义是否首发图标 -->
      <img
      slot="icon"
      slot-scope="props"
      :src="props.checked ? icon.active : icon.normal"
      >
      </van-checkbox>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'sfIcon',

  // 父组件player.vue传递过来的首发球员 Info ( name:名字 + Number (号码))
  props: ['StartingInfo'],
  data () {
    return {
      // setting 组件传递过来的队伍信息 （ 一队 or 二队 ）
      checked: false,
      icon: {
        normal: require('@/images/serve/team/shoufa.png'),
        active: require('@/images/serve/team/active_shoufa.png')
      }
    }
  },

  computed: {
    ...mapState(['Starter'])
  },
  methods: {
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close()
          })
          break
      }
    },
    show() {
      if (this.checked === true) {
        // 将player.vue组件传递过来的首发队员姓名 与号码传递给vuex中的Starter数组中
        this.$store.commit('Starter_function', this.StartingInfo)
      }
    }
  }
}
</script>

<style scoped>
  ::v-deep .van-checkbox__icon{
    height: 100%;
  }
  .van-checkbox img{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 60%;
  }
</style>
